var url = "/BuildingsCtrl/getBuidingsInfoProcessed.x"; //获取楼栋信息的url
class BuildingSelectUtils extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            commArray: '',
            buildingArray: '',
            buildingAliasArray: '',
            unitArray: '',
            unitAliasArray: '',
            floorArray: '',
            roomArray: ''
        }
    }

    componentDidUpdate() {
        if (this.form) this.form.render('select');
    }

    componentDidMount() {
        layui.use(['form'], () => {
            this.form = layui.form();
            if (this.props.defCommCode) {
                this.getBuilding(this.props.defCommCode);
            } else {
                postJson("/comm/findCommList.x", null, (data) => {
                    this.setState({
                        commArray: data.data
                    });

                    if (this.props.commLoadComplete) {
                        this.props.commLoadComplete()
                    }

                    if (this.state.commArray && this.state.commArray.length > 0) {
                        this.getBuilding(this.state.commArray[0].commCode);
                    }

                    this.form.on('select(selectComm)', (data) => {
                        this.getBuilding(data.value)
                    });
                });
            }
            this.form.on('select(selectBuilding)', (data) => {
                this.setState({
                    unitArray: '',
                    floorArray: '',
                    roomArray: ''
                });

                let params = {
                    commCode: $("#selectComm").val(),
                    buildingCode: data.value
                };
                postJson(
                    url, //服务器要接受的url
                    $.param(params),//传递的参数
                    (datas) => { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                        this.state.unitArray = datas.data.units;
                        this.state.unitAliasArray = datas.data.unitAlias;
                        this.setState({
                            selectUnit: ''
                        });
                    }
                );
            });

            this.form.on('select(selectUnit)', (data) => {
                this.setState({
                    floorArray: '',
                    roomArray: ''
                });

                let params = {
                    commCode: $("#selectComm").val(),
                    buildingCode: $("#selectBuilding").val(),
                    unitCode: data.value
                };
                postJson(
                    url, //服务器要接受的url
                    $.param(params),//传递的参数
                    (datas) => { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                        let floorMap = datas.data.floors;
                        //排序
                        let keys = [];
                        $.each(floorMap, (key, val) => {
                            keys[keys.length] = key;
                        });
                        keys.sort();
                        this.state.floorArray = keys;
                        this.form.on('select(selectFloor)', (data) => {
                            this.setState({
                                roomArray: ''
                            });
                            this.state.roomArray = floorMap[data.value];
                            this.setState({
                                selectRoom: '',
                            });
                        });
                        this.setState({
                            selectFloor: '',
                        });
                    }
                );
            });
        });
    }

    getBuilding(commCode) {
        this.setState({
            buildingArray: '',
            buildingAliasArray: '',
            unitArray: '',
            floorArray: '',
            roomArray: ''
        });
        let params = {
            commCode: commCode
        };
        postJson(
            url, //服务器要接受的url
            $.param(params),//传递的参数
            (datas) => { //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                this.state.buildingArray = datas.data.buildings;
                this.state.buildingAliasArray = datas.data.buildingsAliasName;
                this.setState({
                    selectBuilding: '',
                });
            }
        );
    }

    commOption() {
        if (this.state.commArray && this.state.commArray.length > 0) {
            return this.state.commArray.map((array) => {
                return (
                    <option
                        value={array.commCode}>{this.state.commArray.length !== 1 ? '【' + array.commCode + '】' + array.commName : array.commName
                    }</option>
                );
            });
        } else {
            return (<option value="">请选择小区</option>);
        }
    }

    buildingOption() {
        if (this.state.buildingArray && this.state.buildingArray.length > 0) {
            return this.state.buildingArray.map((array, index) => {
                return (<option value={array}>{this.state.buildingAliasArray[index]}</option>);
            });
        } else {
            return (<option value="">请选择楼栋</option>);
        }
    }

    unitOption() {
        if (this.state.unitArray && this.state.unitArray.length > 0) {
            return this.state.unitArray.map((array, index) => {
                return (
                    <option
                        value={array}>{this.state.unitAliasArray[index] ? this.state.unitAliasArray[index] : (array + '单元')}</option>);
            });
        } else {
            return (<option value="">请选择单元</option>);
        }
    }

    floorOption() {
        if (this.state.floorArray && this.state.floorArray.length > 0) {
            return this.state.floorArray.map((array) => {
                return (<option value={array}>{array + '楼'}</option>);
            });
        } else {
            return (<option value="">请选择楼栋</option>);
        }
    }

    roomOption() {
        if (this.state.roomArray && this.state.roomArray.length > 0) {
            return this.state.roomArray.map((array) => {
                return (<option value={array}>{array + '房'}</option>);
            });
        } else {
            return (<option value="">请选择房间</option>);
        }
    }

    getData() {
        return {
            commCode: this.refs.selectComm.value,
            building: this.refs.selectBuilding.value,
            unit: this.refs.selectUnit.value,
            floor: this.refs.selectFloor.value,
            room: this.refs.selectRoom.value
        };
    }

    render() {
        return <div style={{"float": "left"}}>
            <form className="layui-form layui-form-pane">
                <div className="layui-form-item">
                    <label className="layui-form-label">选择楼宇</label>
                    {this.props.defCommCode ?
                        <input type="hidden" id="selectComm" name="selectComm" ref="selectComm"
                               value={this.props.defCommCode}/> :
                        <div className="layui-input-inline">
                            <select name="selectComm" id="selectComm" ref="selectComm" data-filter="selectComm">
                                {this.commOption()}
                            </select>
                        </div>
                    }
                    <div className="layui-input-inline">
                        <select name="selectBuilding" id="selectBuilding" ref="selectBuilding"
                                data-filter="selectBuilding">
                            <option value="">请选择楼栋</option>
                            {this.buildingOption()}
                        </select>
                    </div>
                    <div className="layui-input-inline">
                        <select name="selectUnit" id="selectUnit" ref="selectUnit" data-filter="selectUnit">
                            <option value="">请选择单元</option>
                            {this.unitOption()}
                        </select>
                    </div>
                    <div className="layui-input-inline" style={this.props.floorStyle ? this.props.floorStyle : {}}>
                        <select name="selectFloor" id="selectFloor" ref="selectFloor" data-filter="selectFloor">
                            <option value="">请选择楼层</option>
                            {this.floorOption()}
                        </select>
                    </div>
                    <div className="layui-input-inline" style={this.props.roomStyle ? this.props.roomStyle : {}}>
                        <select name="selectRoom" id="selectRoom" ref="selectRoom" data-filter="selectRoom">
                            <option value="">请选择房号</option>
                            {this.roomOption()}
                        </select>
                    </div>
                </div>
            </form>
        </div>
    }
}